<template>
  <div class="breadcrumb">
    <router-link to="./">首页</router-link>
    &gt;
    <router-link to="./">{{ firstBread }}</router-link>
    &gt;
    {{ lastBread }}
  </div>
</template>
<script setup>
import { useRouter, useRoute } from 'vue-router'
import { defineProps } from 'vue'
const router = useRouter()
const route = useRoute()

const props = defineProps({
  // 面包屑项数组，包含服务平台和知识中枢等
  firstBread:{
    type:String,
    default:'服务平台'
  },
  lastBread:{
    type:String,
    default:'智能中心'
  }
})
// 查找特定路由配置

const aboutRoute = router.options.routes.find(
    rt => rt.path === route.path
)
console.log(444,aboutRoute)
</script>
<style scoped>
.breadcrumb {
  padding: 15px 0;
  font-size: 14px;
  color: #666;
}

.breadcrumb a {
  color: #1e5799;
  text-decoration: none;
}
</style>